<template>
	<view class="share_card">
		<!-- 公共组件-每个页面必须引入 -->
		<public-module></public-module>
		
		<div class="card_bgd">
			<div class="company_logo">
				<img :src="userInfo.companyLogo" />
			</div>
			<div class="company_name">
				{{userInfo.companyName}}
			</div>
			<div class="company_nav">
				<u-scroll-list indicatorColor="#fff0f0" indicatorActiveColor="#FF6600">
				    <div class="nav_item" @click="toNewPage('/pagesShare/card/companyInfo?from=card','companyInfo')">
				    	<div class="nav_img">
				    		<img src="https://pic.moresu.com/FlWTAw8lj5B67JlF2NgcQsbRK6tD" class="img">
				    	</div>
				    	<div class="text">公司简介</div>
				    </div>
				    <div class="nav_item" @click="toNewPage('/pagesCommon/goodsListNew?from=card','goodsListNew')">
				    	<div class="nav_img">
				    		<img src="https://pic.moresu.com/Fpas9UTrV9CANzEehFzbjGDPDlLk" class="img">
				    	</div>
				    	<div class="text">主营产品</div>
				    </div>
				    <div class="nav_item" @click="toPrice()">
				    	<div class="nav_img">
				    		<img src="https://pic.moresu.com/FgTBOay2MKY9ckdRSal3Dm9x2vM9" class="img">
				    	</div>
				    	<div class="text">价格行情</div>
				    </div>
				    <div class="nav_item" @click="toNewPage('/pagesCommon/newList?from=card','newList')">
				    	<div class="nav_img">
				    		<img src="https://pic.moresu.com/1728957383243市场咨询icon.png" class="img">
				    	</div>
				    	<div class="text">市场资讯</div>
				    </div>
				    <div class="nav_item" @click="toNewPage('/pagesShare/card/companyVedioList?from=card','companyVedioList')">
				    	<div class="nav_img">
				    		<img src="https://pic.moresu.com/Fgd8O6O4GLU2HyOVLHVFsvwgvUXV" class="img">
				    	</div>
				    	<div class="text">视频动态</div>
				    </div>
				    <div class="nav_item" @click="toNewPage('/pagesShare/card/documentList?from=card','documentList')">
				    	<div class="nav_img">
				    		<img src="https://pic.moresu.com/1728957368671企业文档icon.png" class="img">
				    	</div>
				    	<div class="text">企业文档</div>
				    </div>
				</u-scroll-list>
			</div>
			<!-- 品牌专区 -->
			<div class="index-zt">
				<z-swiper v-model="info.specialList" :options="options">
					<z-swiper-item v-for="(item,index) in info.specialList" :key="index">
						<div class="zt-item" @click="toNewPage(item.adLink+'&from=card',item)">
							<img :src="item.adImage" style="width:100%;height:100%;" />
						</div>
					</z-swiper-item>
				</z-swiper>
			</div>
		</div>
		<!-- 名片详情 -->
		<div class="user_card">
			<div class="card_info">
				<div class="user_info">
					<div class="user_logo">
						<img :src="userInfo.userHeader" alt="" class="user_img" />
					</div>
					<div class="user_name">{{userInfo.userName}}</div>
					<div class="user_job">{{userInfo.userStation}}</div>
				</div>
				<div class="company_name2">
					{{userInfo.userCompany}}
				</div>
				<div class="user_phone">
					<span>手机：</span>
					<span>{{userInfo.userMobile}}</span>
				</div>
			</div>
		    
			<div style="margin-top: 20px;">
				<u-button type="primary" shape="circle" @click="addPhone">存入通讯录</u-button>
			</div>
		</div>
		
		<!-- 用户信息 -->
		<div class="user_list">
			<u--form>
				<u-form-item  label="姓名"  borderBottom>
					<div style="text-align: right;color: #858585;">{{userInfo.userName}}</div>
				</u-form-item>
				<u-form-item  label="手机"  borderBottom>
					<div style="text-align: right;color: #0D3EB8;" @click="callNumber(userInfo.userMobile)">{{userInfo.userMobile}}</div>
				</u-form-item>
				<u-form-item  label="公司"  borderBottom>
					<div style="text-align: right;color: #858585;">{{userInfo.userCompany}}</div>
				</u-form-item>
			</u--form>
		</div>

	</view>
</template>

<script>
	import {
		indexData,
		getCardInfoAPI,
		setScanCodeLog
	} from '@/config/api.js';
	import {
	  judgeIosPermissionContact
	} from '@/plugins/permission.js'//通讯录权限
	const log = require('@/plugins/log.js');
	import{saveShareUid,getAppLatLon,saveSource}  from '@/plugins/utils.js'
	export default {
		data() {
			return {
				info: {},
				userInfo:{},
				options: {
					slidesPerView: 2,
					spaceBetween: 12,
					autoplay: {
						delay: 2000, //1秒切换一次
						disableOnInteraction: false,
					},
					loop: true
				},
				promoterCode: '',
				shareTitle:'',
			}
		},
		async onLoad(options) {
			await this.$onLaunched;
			if (options.scene) { //分享进入
				var splitStr = unescape(options.scene).split(",");
				let pcodeIndex = splitStr.findIndex((item) => {
					return item.indexOf('pcode') != -1
				})
				splitStr.forEach((el) => {
					if (el.indexOf('pcode') != -1) {
						let shareArry = el.split(":");
						let pcode = shareArry[1];
						this.promoterCode = pcode;
						saveShareUid(pcode);
					}
					if (el.indexOf('source') != -1) {
						let sourceArry = el.split(":");
						let source = sourceArry[1];
						let pcode = ''
						if (pcodeIndex != -1) {
							let shareArry = splitStr[pcodeIndex].split(":");
							pcode = shareArry[1];
						}
						saveSource({
							source: source,
							pcode: pcode
						});
						setScanCodeLog({
							source: source,
							pcode: pcode
						})
					}
				});
			}
			if (options.pcode) {
				this.promoterCode = options.pcode;
				// saveShareUid(this.promoterCode);
				// saveSource({
				// 	source: options.source,
				// 	pcode: options.pcode
				// });
			}
			this.getInfo();
			this.getCardInfo();
		},
		async onShow() {
			
		},
		async onShareAppMessage() {
			await this.$onLaunched;
			return {
				title: this.shareTitle,
				path: '/pagesShare/card/index?pcode=' + this.promoterCode
			}
		},
		methods: {
			// 拨号
			callNumber(phoneNum){
				uni.makePhoneCall({
					phoneNumber: phoneNum 
				});
			},
			
			// 存入通讯录
			addPhone(){
				uni.addPhoneContact({
					firstName:this.userInfo.userName,
					mobilePhoneNumber:this.userInfo.userMobile,
					organization:this.userInfo.companyName,
					title:this.userInfo.userStation,
					success: function () {
						uni.showToast({
							title: '已存入通讯录',
							duration:1000,
							icon:'none'
						})
					},
					fail: function () {
						uni.showToast({
							title: '出了点小问题，请联系客服哦~~',
							duration:1000,
							icon:'none'
						})
					}
				});

			},
			// 获取名片信息
			getCardInfo(){
				getCardInfoAPI({
					pcode:this.promoterCode
				}).then((res) => {
					this.userInfo=res;
					this.shareTitle=res.shareTitle
				})
			},
			// 获取专题信息
			getInfo() {
				let adType = 1
				// #ifdef H5
				adType = 2
				// #endif
				indexData({
					adType
				}).then((res) => {
					this.info = res;
				})
			},
			toPrice(){
				log.info('名片分享页&价格行情')
				getApp().globalData.from = 'card';
				uni.switchTab({
				  url: '/pages/public/price'
				});
			},
			toNewPage(url,type) {
				if(type=='companyInfo'){
					log.info('名片分享页&公司简介')
				}else if(type=='goodsListNew'){
					log.info('名片分享页&主营产品')
				}else if(type=='newList'){
					log.info('名片分享页&市场资讯')
				}else if(type=='companyVedioList'){
					log.info('名片分享页&视频动态')
				}else if(type=='documentList'){
					log.info('名片分享页&企业文档')
				}else if(type.adTitle=='华润'){
					log.info('名片分享页&华润品牌')
				}else if(type.adTitle=='万华'){
					log.info('名片分享页&万华品牌')
				}else if(type.adTitle=='永通'){
					log.info('名片分享页&永通品牌')
				}else if(type.adTitle=='瑞美福'){
					log.info('名片分享页&瑞美福品牌')
				}else if(type.adTitle=='阳煤'){
					log.info('名片分享页&阳煤品牌')
				}else if(type.adTitle=='潞宝'){
					log.info('名片分享页&潞宝品牌')
				}else if(type.adTitle=='长安'){
					log.info('名片分享页&长安品牌')
				}else if(type.adTitle=='利华益'){
					log.info('名片分享页&利华益品牌')
				}
				uni.navigateTo({
					url: url
				});
			},

		},
	}
</script>

<style lang="scss">
	.share_card {
		width: 100%;
		background-color: #fff;

		.card_bgd {
			width: 100%;
			height: 800rpx;
			padding: 20rpx;
			background: url('https://pic.moresu.com/FrnkMqp66cs7lIpYt_luGm-URinb') no-repeat;
			background-size: cover;

			.company_logo {
				height: 130rpx;
				padding-top: 40rpx;
				padding-left: 36rpx;

				img {
					width: 200rpx;
					height: 80rpx;
				}
			}

			.company_name {
				padding-left: 36rpx;
				padding-top: 10rpx;
				height: 60rpx;
				font-family: PingFang SC, PingFang SC;
				font-weight: bold;
				font-size: 38rpx;
				color: #FFFFFF;
			}

			.company_nav {
				width: 100%;
				height: 194rpx;
				margin-top: 100rpx;
				padding: 30rpx 40rpx 20rpx;
				background: #FFFFFF;
				box-shadow: 0px 0px 10px 1px rgba(0, 0, 0, 0.06);
				border-radius: 16rpx;
				.nav_item {
					padding: 0 10rpx;
					height: 110rpx;
					margin-right: 52rpx;
				
					.nav_img {
						width: 96rpx;
						display: flex;
						justify-content: center;
						align-items: center;
						margin-bottom: 10rpx;
				
						.img {
							width: 70rpx;
							height: 70rpx;
						}
					}
				
					.text {
						height: 32rpx;
						font-family: Microsoft YaHei, Microsoft YaHei;
						font-weight: 400;
						font-size: 24rpx;
						color: #000;
						text-align: left;
					}
				}
			}

			.index-zt {
				margin-top: 24rpx;

				.zt-item {
					width: 345rpx;
					height: 180rpx;
					box-shadow: 0px 3rpx 6rpx 1rpx rgba(0, 0, 0, 0.06);
					border-radius: 18rpx;
					margin-right: 20rpx;
					overflow: hidden;
				}

				.zt-item:last-child {
					margin-right: 0
				}
			}
		}

		.user_card {
			width: 100%;
			height: 440rpx;
			padding: 0 20rpx;
			margin-bottom: 20px;
            transform: translateY(-60rpx);
			.card_info {
				height: 400rpx;
				background: url('https://pic.moresu.com/1728962313576蒙版组 791.png') no-repeat #fff;
				background-size: cover;
				border-radius: 20rpx;
				box-shadow: 0px 0px 10px rgba(0,0,0,0.1);

				.user_info {
					padding-left: 46rpx;
					padding-top: 46rpx;
					height: 152rpx;
					display: flex;
					align-items: center;

					.user_logo {
						width: 106rpx;
						height: 106rpx;
						border-radius: 53rpx;
						overflow: hidden;

						.user_img {
							width: 100%;
							height: 100%;
							object-fit: cover;
						}
					}

					.user_name {
						height: 40rpx;
						line-height: 40rpx;
						margin-left: 24rpx;
						font-family: Source Han Sans CN, Source Han Sans CN;
						letter-spacing: 6rpx;
						font-weight: 600;
						font-size: 32rpx;
						color: #333;
					}

					.user_job {
						height: 40rpx;
						line-height: 48rpx;
						margin-left: 16rpx;
						font-family: Source Han Sans CN, Source Han Sans CN;
						font-weight: 400;
						font-size: 24rpx;
						color: #858585;
					}
				}
			    
				.company_name2{
					padding-left: 46rpx;
					padding-top: 36rpx;
					height: 60rpx;
					font-family: Source Han Sans CN, Source Han Sans CN;
					font-weight: 500;
					font-size: 32rpx;
					color: #333333;
					letter-spacing: 4rpx;
				}
				.user_phone{
					padding-left: 46rpx;
					padding-top: 28rpx;
					height: 50rpx;
					font-family: Source Han Sans CN, Source Han Sans CN;
					font-weight: 400;
					font-size: 24rpx;
					color: #858585;
				}
			}
		}
		
		.user_list{
			padding:20rpx 20rpx 60rpx;
		}
	}
</style>